<template>
  <div class="list-page">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="display: flex;justify-content: space-between;width: 100%;">
            <el-form-item label="事件内容" prop="eventContent">
              <el-input v-model="queryParams.eventContent" placeholder="请输入事件内容" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="处理状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="处理状态" clearable>
                <el-option :value="0" label="未处理" />
                <el-option :value="1" label="进行中" />
                <el-option :value="2" label="已控制" />
                <el-option :value="3" label="已关闭" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            </el-form-item>
            <div style="display: flex;justify-content: space-between;width: 100%;">
              <br />
              <div>
                <el-button icon="RefreshRight" @click="resetQuery">刷新</el-button>
                <el-button type="primary" icon="Plus" class="add-button" @click="handleAdd">新增</el-button>
                <el-button type="danger" icon="Delete" :disabled="multipleSelection.length === 0" @click="batchDelete">删除</el-button>
              </div>
            </div>
          </el-form>
        </el-card>
      </div>
    </transition>

    <!-- 列表区域 -->
    <el-card shadow="hover" class="w-full">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" prop="index" width="80" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="船名" align="left" prop="shipEarlyWarning.shipName" :show-overflow-tooltip="true" min-width="120">
          <template #default="scope">
            <span>{{ getShipProperty(scope.row, 'shipName') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="MMSI" align="center" prop="shipEarlyWarning.mmsi" min-width="120">
          <template #default="scope">
            <span>{{ getShipProperty(scope.row, 'mmsi') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="船舶类型" align="center" prop="shipEarlyWarning.shipType" width="100">
          <template #default="scope">
            <span>{{ getDictLabel('ship_type', getShipProperty(scope.row, 'shipType')) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="事件内容" align="left" prop="shipEarlyWarning.eventContent" :show-overflow-tooltip="true" min-width="150">
          <template #default="scope">
            <span>{{ getShipProperty(scope.row, 'eventContent') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="位置" align="center" min-width="160">
          <template #default="scope">
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div>经度: {{ getShipProperty(scope.row, 'lon') }}</div>
                <div>纬度: {{ getShipProperty(scope.row, 'lat') }}</div>
              </template>
              <span>{{ getShipProperty(scope.row, 'lon') }}, {{ getShipProperty(scope.row, 'lat') }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="发生地点" align="center" prop="shipEarlyWarning.place" width="150">
          <template #default="scope">
            <span>{{ getShipProperty(scope.row, 'place') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发生时间" align="center" prop="shipEarlyWarning.createTime" min-width="150">
          <template #default="scope">
            <span>{{ formatDateTime(getShipProperty(scope.row, 'createTime')) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预警级别" align="center" prop="earlyWarningInfo.warnLevel" min-width="120">
          <template #default="scope">
            <div class="warning-level-container">
              <el-tooltip :content="scope.row.earlyWarningInfo?.warnLevel || getShipProperty(scope.row, 'warningLv')" placement="top">
                <img 
                  :src="getWarnLevelImageUrl(scope.row.earlyWarningInfo?.warnLevel || getShipProperty(scope.row, 'warningLv'))"
                  style="width: 32px; height: 32px" 
                />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center" prop="earlyWarningInfo.status" min-width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.earlyWarningInfo?.status || getShipProperty(scope.row, 'status') || getShipProperty(scope.row, 'dispose'))">
              {{ getStatusLabel(scope.row.earlyWarningInfo?.status || getShipProperty(scope.row, 'status') || getShipProperty(scope.row, 'dispose')) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="280" fixed="right" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" link @click="viewDetails(scope.row)">详情</el-button>
            <el-button size="small" type="success" link @click="handlePushNotice(scope.row)">同步</el-button>
            <el-button size="small" type="warning" link @click="handleJudgment(scope.row)">研判</el-button>
            <el-button size="small" type="danger" link @click="handleDelete(scope.row)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="船舶预警详情" width="800px" center destroy-on-close>
      <template #header>
        <div class="dialog-header">
          <span class="dialog-title">船舶预警详情</span>
          <div class="action-buttons">
            <el-button v-if="!isEditing" type="primary" @click="enableEditing" class="edit-btn"><i class="el-icon-edit" /> 编辑 </el-button>
            <el-button v-else type="info" @click="cancelEditing" class="cancel-btn"><i class="el-icon-close" /> 取消 </el-button>
          </div>
        </div>
      </template>
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="船名：" prop="shipEarlyWarning.shipName">
              <el-input v-model="editForm.shipEarlyWarning.shipName" placeholder="船名" :disabled="!isEditing" />
            </el-form-item>

            <el-form-item label="MMSI：" prop="shipEarlyWarning.mmsi">
              <el-input v-model="editForm.shipEarlyWarning.mmsi" placeholder="MMSI编号" :disabled="!isEditing" />
            </el-form-item>

            <el-form-item label="船舶类型：" prop="shipEarlyWarning.shipType">
              <el-select v-model="editForm.shipEarlyWarning.shipType" style="width: 100%" :disabled="!isEditing">
                <el-option v-for="item in shipTypeDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>

            <el-form-item label="事件内容：" prop="shipEarlyWarning.eventContent">
              <el-input v-model="editForm.shipEarlyWarning.eventContent" type="textarea" :rows="2" :disabled="!isEditing" />
            </el-form-item>
            
            <el-form-item label="预警级别：" prop="earlyWarningInfo.warnLevel">
              <el-select v-model="editForm.earlyWarningInfo.warnLevel" style="width: 100%" :disabled="!isEditing">
                <el-option v-for="item in warnLevelDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发生时间：">
              <el-input v-model="editForm.shipEarlyWarning.createTime" disabled />
            </el-form-item>

            <el-form-item label="经度：" prop="shipEarlyWarning.lon">
              <el-input v-model="editForm.shipEarlyWarning.lon" :disabled="!isEditing" />
            </el-form-item>

            <el-form-item label="纬度：" prop="shipEarlyWarning.lat">
              <el-input v-model="editForm.shipEarlyWarning.lat" :disabled="!isEditing" />
            </el-form-item>

            <el-form-item label="发生地点：" prop="shipEarlyWarning.place">
              <el-input v-model="editForm.shipEarlyWarning.place" :disabled="!isEditing" />
            </el-form-item>

            <el-form-item label="禁航需求：" prop="earlyWarningInfo.navigationClosure">
              <el-radio-group v-model="editForm.earlyWarningInfo.navigationClosure" :disabled="!isEditing">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="预警状态：" prop="earlyWarningInfo.status">
              <el-select v-model="editForm.earlyWarningInfo.status" style="width: 100%" :disabled="!isEditing">
                <el-option :value="0" label="未处理" />
                <el-option :value="1" label="进行中" />
                <el-option :value="2" label="已控制" />
                <el-option :value="3" label="已关闭" />
              </el-select>
            </el-form-item>

            <el-form-item label="记录：" prop="earlyWarningInfo.result">
              <el-input
                v-model="editForm.earlyWarningInfo.result"
                type="textarea"
                :rows="3"
                placeholder="请输入记录信息"
                :disabled="!isEditing"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button v-if="isEditing" type="primary" @click="handleSubmit" class="save-btn"
          ><i class="el-icon-check" />
          保存修改
        </el-button>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增弹窗 -->
    <el-dialog v-model="addDialogVisible" width="80%" top="5vh" destroy-on-close class="add-dialog" :show-header="false">
      <AddComponent @success="handleAddSuccess" />
    </el-dialog>

    <!-- 添加通知弹窗 -->
    <el-dialog v-model="noticeDialog.visible" title="推送预警通知" width="800px" destroy-on-close>
      <el-form ref="noticeFormRef" :model="noticeForm" :rules="noticeRules" label-width="100px">
        <el-form-item label="通知标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入通知标题" />
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input v-model="noticeForm.content" type="textarea" :rows="8" placeholder="请输入通知内容" />
        </el-form-item>
        <el-form-item label="通知方式" prop="notifyMethod">
          <el-select v-model="noticeForm.notifyMethod" placeholder="请选择通知方式" style="width: 100%" multiple>
            <el-option v-for="dict in notifyMethodDict" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="推送对象" prop="notifyTargets">
          <el-select v-model="noticeForm.notifyTargets" placeholder="请选择推送对象" style="width: 100%" multiple>
            <el-option v-for="target in notifyTargetOptions" :key="target.value" :label="target.label" :value="target.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitNoticeForm">确 定</el-button>
          <el-button @click="noticeDialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加研判弹窗 -->
    <el-dialog v-model="judgmentDialog.visible" title="预警研判" width="900px" destroy-on-close class="judgment-dialog">
      <el-form ref="judgmentFormRef" :model="judgmentForm" :rules="judgmentRules" label-width="120px">
        <!-- 第一个板块：预警信息 -->
        <div class="judgment-section info-section">
          <h3 class="section-title">
            <el-icon>
              <InfoFilled />
            </el-icon>
            预警信息
          </h3>
          <el-divider></el-divider>
          <div class="info-display">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="info-row">
                  <span class="info-label">船名：</span>
                  <span class="info-value">{{ currentWarning.shipName || currentWarning.shipEarlyWarning?.shipName }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">MMSI：</span>
                  <span class="info-value">{{ currentWarning.mmsi || currentWarning.shipEarlyWarning?.mmsi }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">发生时间：</span>
                  <span class="info-value">{{ formatDateTime(currentWarning.createTime || currentWarning.shipEarlyWarning?.createTime || currentWarning.shipEarlyWarning?.warningTime) }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">处理状态：</span>
                  <span class="info-value">
                    <el-tag :type="(currentWarning.status || currentWarning.earlyWarningInfo?.status) === 1 ? 'success' : 'warning'" size="small">
                      {{ (currentWarning.status || currentWarning.earlyWarningInfo?.status) === 1 ? '已处理' : '未处理' }}
                    </el-tag>
                  </span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-row">
                  <span class="info-label">船舶类型：</span>
                  <span class="info-value">{{ getDictLabel('ship_type', currentWarning.shipType || currentWarning.shipEarlyWarning?.shipType) }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">经纬度：</span>
                  <span class="info-value">{{ currentWarning.lon || currentWarning.shipEarlyWarning?.lon }}, {{ currentWarning.lat || currentWarning.shipEarlyWarning?.lat }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">预警级别：</span>
                  <span class="info-value">
                    <el-tag :type="getWarnLevelType(currentWarning.warningLv || currentWarning.earlyWarningInfo?.warnLevel)" size="small">
                      {{ currentWarning.warningLv || currentWarning.earlyWarningInfo?.warnLevel }}级预警
                    </el-tag>
                  </span>
                </div>
                <div class="info-row">
                  <span class="info-label">事件内容：</span>
                  <span class="info-value">{{ currentWarning.eventContent || currentWarning.shipEarlyWarning?.eventContent }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 第二个板块：预警研判 -->
        <div class="judgment-section">
          <h3 class="section-title">
            <el-icon>
              <Warning />
            </el-icon>
            预警研判
          </h3>
          <el-divider></el-divider>

          <el-form-item label="预警级别" prop="eventLevel">
            <el-select v-model="judgmentForm.eventLevel" placeholder="请选择预警级别" style="width: 100%">
              <el-option v-for="item in warnLevelDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>

          <el-form-item label="研判结果" prop="judgmentResult">
            <el-radio-group v-model="judgmentForm.judgmentResult">
              <el-radio :label="1">转为应急事件</el-radio>
              <el-radio :label="0">无需转为应急事件</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 第三个板块：预警转事件（仅当选择转为应急事件时显示） -->
        <div class="judgment-section" v-if="judgmentForm.judgmentResult === 1">
          <h3 class="section-title">
            <el-icon>
              <Bell />
            </el-icon>
            预警转事件
          </h3>
          <el-divider></el-divider>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="事件标题" prop="title">
                <el-input v-model="judgmentForm.title" placeholder="请输入事件标题" />
              </el-form-item>

              <el-form-item label="发生时间" prop="happenTime">
                <el-date-picker
                  v-model="judgmentForm.happenTime"
                  type="datetime"
                  placeholder="选择发生时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="发生地点" prop="location">
                <el-input v-model="judgmentForm.location" placeholder="请输入发生地点" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首次报告时间" prop="firstReportTime">
                <el-date-picker
                  v-model="judgmentForm.firstReportTime"
                  type="datetime"
                  placeholder="选择首次报告时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="处置状态" prop="status">
                <el-select v-model="judgmentForm.status" placeholder="请选择处置状态" style="width: 100%">
                  <el-option :value="1" label="未启动" />
                  <el-option :value="2" label="进行中" />
                  <el-option :value="3" label="已控制" />
                  <el-option :value="4" label="已关闭" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="事件描述" prop="description">
            <el-input type="textarea" v-model="judgmentForm.description" :rows="3" placeholder="请输入事件描述" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="judgmentDialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="submitJudgmentForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineAsyncComponent, reactive, onMounted, getCurrentInstance, type ComponentInternalInstance, toRefs, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { listData } from '@/api/system/dict/data';
import { DictDataQuery } from '@/api/system/dict/data/types';
import {
  getMeteorologicalWarningList,
  getMeteorologicalWarningById,
  updateMeteorologicalWarning,
  deleteMeteorologicalWarning
} from '@/api/bridge/traffic/weather';
import dayjs from 'dayjs';
import { useRouter, useRoute } from 'vue-router';
import { addNotice, publishNotice } from '@/api/bridge/command/notice';
import { addEmergencyEvent } from '@/api/bridge/command/event';
import useUserStore from '@/store/modules/user';
import { InfoFilled, Warning, Bell, RefreshRight } from '@element-plus/icons-vue';
import { deleteGShipWarning, deleteGShipWarningBatch, getShipWarningList, getShipWarningById, updateShipWarning } from '@/api/bridge/traffic/ship';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { yjcl } = toRefs<any>(proxy?.useDict('yjcl'));
const userStore = useUserStore();

// 添加当前行数据的响应式引用
const currentRow = ref<WarningDataType | null>(null);

// 添加判断表单类型定义
interface JudgmentFormType {
  judgmentResult: number;
  eventLevel: string;
  title: string;
  happenTime: string;
  location: string;
  firstReportTime: string;
  status: number;
  description: string;
  warningId: string;
  eventType: string;
}

// 定义扁平化的船舶预警类型
interface ShipWarningType {
  id?: string | number;
  shipName?: string;
  mmsi?: number;
  shipType?: string;
  eventContent?: string;
  lon?: number;
  lat?: number;
  warningLv?: string;
  place?: string;
  status?: number;
  createTime?: string;
  updateTime?: string;
  warningTime?: string;
  warnLevel?: string;
  warningId?: string | number;
  // 支持嵌套结构
  shipEarlyWarning?: {
    id?: string | number;
    shipName?: string;
    mmsi?: number;
    shipType?: string;
    eventContent?: string;
    lon?: number;
    lat?: number;
    warningLv?: string;
    place?: string;
    status?: number;
    createTime?: string;
    updateTime?: string;
    warningTime?: string;
    warningId?: string | number;
    result?: string;
  };
  earlyWarningInfo?: {
    id?: string | number;
    title?: string;
    warnLevel?: string;
    navigationClosure?: number;
    status?: number;
  };
}

// 定义预警信息类型
interface EarlyWarningInfoType {
  id?: string | number;
  title?: string;
  warnLevel?: string;
  navigationClosure?: number;
  status?: number;
  result?: string;
}

// 定义预警数据结构
interface WarningDataType {
  earlyWarningInfo?: EarlyWarningInfoType;
  shipEarlyWarning?: ShipWarningType;
  [key: string]: any;
}

const DictQueryParams = ref<DictDataQuery>({
  dictType: '',
  pageNum: 1,
  pageSize: 10,
  dictName: '',
  dictLabel: ''
});

const tableData = ref<WarningDataType[]>([]);
const showSearch = ref(true);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: null,
  eventContent: null,
  status: null,
  title: null
});

const queryFormRef = ref<any>(null);

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  // 调用查询接口刷新数据
  getList();
};

const getList = async () => {
  try {
    const res = await getShipWarningList(queryParams);
    
    // 处理列表数据，统一转换为主副表结构
    tableData.value = res.rows.map((item: any) => {
      // 如果已经是嵌套结构，直接返回
      if (item.shipEarlyWarning && item.earlyWarningInfo) {
        return item;
      }
      
      // 否则，转换为嵌套结构
      return convertToNestedStructure(item);
    });
    
    total.value = res.total;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 分类选择
const filterType = ref('全部');
// 搜索值
const searchValue = ref('');
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(10);
// 总数量
const total = ref(0);

const detailVisible = ref(false);
const currentDetail = ref<WarningDataType>({});

// 编辑表单引用和编辑状态
const editFormRef = ref();
const isEditing = ref(false);
const originalData = ref<{
  earlyWarningInfo?: {
    id?: string | number;
    title?: string;
    warnLevel?: string;
    navigationClosure?: number;
    status?: number;
  },
  shipEarlyWarning?: {
    id?: string | number;
    shipName?: string;
    mmsi?: string | number;
    shipType?: string;
    eventContent?: string;
    createTime?: string;
    warningTime?: string;
    lon?: string | number;
    lat?: string | number;
    place?: string;
    status?: number;
    warningLv?: string;
    result?: string;
  }
}>({
  earlyWarningInfo: {},
  shipEarlyWarning: {}
});

// 初始化表单时设置 result 字段
const editForm = ref({
  earlyWarningInfo: {
    title: currentDetail.value.earlyWarningInfo?.title,
    warnLevel: currentDetail.value.earlyWarningInfo?.warnLevel,
    navigationClosure: currentDetail.value.earlyWarningInfo?.navigationClosure,
    status: currentDetail.value.earlyWarningInfo?.status,
    result: currentDetail.value.earlyWarningInfo?.result || ''
  },
  shipEarlyWarning: {
    id: currentDetail.value.id,
    shipName: currentDetail.value.shipName,
    mmsi: currentDetail.value.mmsi,
    shipType: currentDetail.value.shipType,
    eventContent: currentDetail.value.eventContent,
    createTime: currentDetail.value.createTime,
    warningTime: currentDetail.value.warningTime,
    lon: currentDetail.value.lon,
    lat: currentDetail.value.lat,
    place: currentDetail.value.place,
    status: currentDetail.value.status || currentDetail.value.dispose || 0,
    warningLv: currentDetail.value.warningLv,
    result: currentDetail.value.result || ''
  }
});

// 修改校验规则，移除重复定义
const editRules = ref<any>({
  'shipEarlyWarning.shipName': [{ required: true, message: '请输入船名', trigger: 'blur' }],
  'earlyWarningInfo.warnLevel': [{ required: true, message: '请选择预警级别', trigger: 'change' }],
  'shipEarlyWarning.mmsi': [{ required: true, message: '请输入MMSI编号', trigger: 'blur' }],
  'shipEarlyWarning.shipType': [{ required: true, message: '请选择船舶类型', trigger: 'blur' }],
  'shipEarlyWarning.eventContent': [{ required: true, message: '请输入事件内容', trigger: 'blur' }],
  'shipEarlyWarning.lon': [{ required: true, message: '请输入经度', trigger: 'blur' }],
  'shipEarlyWarning.lat': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
  'earlyWarningInfo.navigationClosure': [{ required: true, message: '请选择禁航需求', trigger: 'change' }],
  'earlyWarningInfo.status': [{ required: true, message: '请选择处理状态', trigger: 'change' }],
  'earlyWarningInfo.result': [{ required: true, message: '请输入记录信息', trigger: 'blur' }]
});

// 启用编辑模式
const enableEditing = () => {
  isEditing.value = true;
  originalData.value = JSON.parse(JSON.stringify(editForm.value));
};

// 取消编辑
const cancelEditing = () => {
  isEditing.value = false;
  editForm.value = JSON.parse(JSON.stringify(originalData.value));
};

// 提交修改
const handleSubmit = async () => {
  if (!editFormRef.value) return;

  try {
    await editFormRef.value.validate();

    // 准备提交数据
    const submitData = {
      earlyWarningInfo: {
        ...editForm.value.earlyWarningInfo
      },
      shipEarlyWarning: {
        ...editForm.value.shipEarlyWarning
      }
    };

    const originalStatus = originalData.value?.earlyWarningInfo?.status;
    const newStatus = editForm.value.earlyWarningInfo.status;

    // 发送更新请求
    const res = await updateShipWarning(submitData);

    if (res.code === 200) {
      // 如果状态发生改变，询问是否发送通知
      if (originalStatus !== newStatus) {
        ElMessageBox.confirm('您修改了处理状态，是否发送通知？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        })
          .then(() => {
            handlePushNotice(currentDetail.value);
          })
          .catch(() => {});
      }

      ElMessage.success('更新成功');
      detailVisible.value = false;
      getList(); // 刷新列表
    } else {
      ElMessage.error(res.msg || '更新失败');
    }
  } catch (error) {
    console.error('提交修改失败:', error);
    ElMessage.error('提交失败，请检查表单');
  }
};

// 字典数据
const warnLevelDict = ref([]);
const shipTypeDict = ref([]);
const notifyMethodDict = ref([]);

// 获取预警级别字典
function getWarnLevelDict() {
  const dictParams = { ...DictQueryParams.value, dictType: 'warn_level' };
  listData(dictParams).then((res) => {
    warnLevelDict.value = res.rows;
  });
}

// 获取船舶类型字典
function getShipTypeDict() {
  const dictParams = { ...DictQueryParams.value, dictType: 'ship_type' };
  listData(dictParams).then((res) => {
    shipTypeDict.value = res.rows;
  });
}

// 获取通知方式字典
function getNotifyMethodDict() {
  const dictParams = { ...DictQueryParams.value, dictType: 'notify_method' };
  listData(dictParams).then((res) => {
    notifyMethodDict.value = res.rows;
  });
}

// 格式化日期时间
function formatDateTime(dateTime) {
  if (!dateTime) return '';
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
}

// 获取字典标签
function getDictLabel(dictType, value) {
  let label = '';

  // 根据不同的字典类型获取对应的字典列表
  let dictList = [];
  switch (dictType) {
    case 'warn_level':
      dictList = warnLevelDict.value;
      break;
    case 'ship_type':
      dictList = shipTypeDict.value;
      break;
    default:
      break;
  }

  // 查找匹配的字典项
  const dictItem = dictList.find((item) => item.dictValue === value);
  if (dictItem) {
    label = dictItem.dictLabel;
  }

  return label || value;
}

const viewDetails = async (row: any) => {
  isEditing.value = false;
  try {
    // 获取 ID，兼容不同的数据结构
    const warningId = row.shipEarlyWarning?.id || row.earlyWarningInfo?.id || row.id;
    const res = await getShipWarningById(warningId);
    
    // 保存原始数据，用于查看详情
    currentDetail.value = res.data;
    
    // 使用嵌套结构初始化表单
    if (res.data.earlyWarningInfo && res.data.shipEarlyWarning) {
      // 如果后端返回的是嵌套结构，直接使用
      editForm.value = {
        earlyWarningInfo: { ...res.data.earlyWarningInfo },
        shipEarlyWarning: { ...res.data.shipEarlyWarning }
      };
    } else {
      // 如果后端返回的是扁平结构，转换为嵌套结构
      editForm.value = {
        earlyWarningInfo: {
          id: res.data.id,
          title: '船舶预警',
          warnLevel: res.data.warningLv,
          navigationClosure: res.data.navigationClosure || 0,
          status: res.data.status || res.data.dispose || 0
        },
        shipEarlyWarning: {
          id: res.data.id,
          shipName: res.data.shipName,
          mmsi: res.data.mmsi,
          shipType: res.data.shipType,
          eventContent: res.data.eventContent,
          createTime: res.data.createTime,
          warningTime: res.data.warningTime,
          lon: res.data.lon,
          lat: res.data.lat,
          place: res.data.place,
          status: res.data.status || res.data.dispose || 0,
          warningLv: res.data.warningLv,
          result: res.data.result || ''
        }
      };
    }
    
    detailVisible.value = true;
  } catch (error) {
    ElMessage.error('获取详情失败');
  }
};

// 添加通知相关变量和方法
const noticeDialog = reactive({
  visible: false,
  title: '推送预警通知'
});

const noticeFormRef = ref();
const noticeForm = ref({
  title: '',
  content: '',
  warnType: '3', // 1-气象预警, 2-环境预警, 3-船舶预警, 4-交通事故预警, 5-地质灾害预警
  status: 1,
  notifyMethod: [],
  notifyTargets: [],
  sendTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  userId: '',
  warnLevel: ''
});

const noticeRules = {
  title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
  notifyMethod: [{ required: true, message: '请选择通知方式', trigger: 'change' }],
  notifyTargets: [{ required: true, message: '请选择通知对象', trigger: 'change' }]
};

// 在辅助函数部分添加转换方法
// 将扁平结构转换为主副表结构
const convertToNestedStructure = (flatData) => {
  if (!flatData) return null;
  
  return {
    earlyWarningInfo: {
      id: flatData.id,
      title: '船舶预警',
      warnLevel: flatData.warningLv,
      navigationClosure: flatData.navigationClosure || 0,
      status: flatData.status || flatData.dispose || 0
    },
    shipEarlyWarning: {
      id: flatData.id,
      shipName: flatData.shipName,
      mmsi: flatData.mmsi,
      shipType: flatData.shipType,
      eventContent: flatData.eventContent,
      createTime: flatData.createTime || '',
      lon: flatData.lon,
      lat: flatData.lat,
      place: flatData.place,
      status: flatData.status || flatData.dispose || 0,
      warningLv: flatData.warningLv,
      result: flatData.result || ''
    }
  };
};

// 格式化通知内容
const formatNoticeContent = (row: any) => {
  // 确定使用哪个数据源
  let data;
  
  // 优先使用嵌套结构
  if (row.shipEarlyWarning && row.earlyWarningInfo) {
    data = {
      shipName: row.shipEarlyWarning.shipName,
      mmsi: row.shipEarlyWarning.mmsi,
      shipType: row.shipEarlyWarning.shipType,
      eventContent: row.shipEarlyWarning.eventContent,
      createTime: row.shipEarlyWarning.createTime,
      lon: row.shipEarlyWarning.lon,
      lat: row.shipEarlyWarning.lat,
      warningLv: row.earlyWarningInfo.warnLevel || row.shipEarlyWarning.warningLv,
      status: row.earlyWarningInfo.status
    };
  } else {
    // 使用扁平结构
    data = row;
  }
  
  const content = [
    `船名：${data.shipName || '未知'}`,
    `MMSI：${data.mmsi || '未知'}`,
    `船舶类型：${getDictLabel('ship_type', data.shipType) || '未知'}`,
    `事件内容：${data.eventContent || '未知'}`,
    `发生时间：${formatDateTime(data.createTime) || '未知'}`,
    `经度：${data.lon || '未知'}`,
    `纬度：${data.lat || '未知'}`,
    `预警级别：${data.warningLv || '未知'}级预警`,
    `处理状态：${data.status === 1 ? '已处理' : '未处理'}`
  ].join('\n');
  
  return content;
};

// 处理推送通知
function handlePushNotice(row: any) {
  currentRow.value = row;
  
  // 使用转换后的数据确保结构一致性
  let data;
  
  if (row.shipEarlyWarning && row.earlyWarningInfo) {
    data = row;
  } else {
    data = convertToNestedStructure(row);
  }
  
  noticeForm.value = {
    title: '船舶预警通知',
    content: formatNoticeContent(row),
    warnType: '3',
    status: 1,
    notifyMethod: [],
    notifyTargets: [],
    sendTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    userId: String(userStore.userId),
    warnLevel: data.earlyWarningInfo.warnLevel || data.shipEarlyWarning.warningLv
  };
  noticeDialog.visible = true;
}

// 提交通知表单
async function submitNoticeForm() {
  if (!noticeFormRef.value) return;

  await noticeFormRef.value.validate();

  try {
    const submitData = {
      ...noticeForm.value,
      notifyMethod: Array.isArray(noticeForm.value.notifyMethod) ? noticeForm.value.notifyMethod.join(',') : noticeForm.value.notifyMethod
    };

    const res = await addNotice(submitData);
    if (res.code === 200) {
      await publishNotice(res.data);
      ElMessage.success('通知已同步');
      noticeDialog.visible = false;
    }
  } catch (error) {
    console.error('推送失败:', error);
    ElMessage.error('推送失败');
  }
}

// 推送对象选项
const notifyTargetOptions = ref([
  { label: '大桥管理局', value: 'bridge_admin' },
  { label: '卫生管理局', value: 'health_admin' },
  { label: '中交公规院', value: 'traffic_institute' },
  { label: '海事局', value: 'maritime_admin' }
]);

// 添加研判相关变量和方法
const judgmentDialog = reactive({
  visible: false
});

const judgmentFormRef = ref();
const judgmentForm = ref<JudgmentFormType>({
  judgmentResult: 0,
  eventLevel: '',
  title: '',
  happenTime: '',
  location: '',
  firstReportTime: '',
  status: 1,
  description: '',
  warningId: '',
  eventType: 'ship'
});

const judgmentRules = {
  eventLevel: [{ required: true, message: '请选择预警级别', trigger: 'change' }],
  judgmentResult: [{ required: true, message: '请选择研判结果', trigger: 'change' }],
  // 仅当需要转为应急事件时验证以下字段
  title: [
    {
      required: true,
      message: '请输入事件标题',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请输入事件标题'));
        } else {
          callback();
        }
      }
    }
  ],
  happenTime: [
    {
      required: true,
      message: '请选择发生时间',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请选择发生时间'));
        } else {
          callback();
        }
      }
    }
  ],
  location: [
    {
      required: true,
      message: '请输入发生地点',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请输入发生地点'));
        } else {
          callback();
        }
      }
    }
  ],
  description: [
    {
      required: true,
      message: '请输入事件描述',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请输入事件描述'));
        } else {
          callback();
        }
      }
    }
  ],
  firstReportTime: [
    {
      required: true,
      message: '请选择首次报告时间',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请选择首次报告时间'));
        } else {
          callback();
        }
      }
    }
  ],
  status: [
    {
      required: true,
      message: '请选择处置状态',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (judgmentForm.value.judgmentResult === 1 && !value) {
          callback(new Error('请选择处置状态'));
        } else {
          callback();
        }
      }
    }
  ]
};

// 当前预警信息
const currentWarning = ref<ShipWarningType>({});

// 处理研判方法
function handleJudgment(row: any) {
  // 保存原始数据以便后续更新
  currentDetail.value = row;
  
  // 确定使用哪个数据源并设置当前预警信息
  if (row.shipEarlyWarning && row.earlyWarningInfo) {
    // 使用嵌套结构
    currentWarning.value = {
      ...row.shipEarlyWarning,
      earlyWarningInfo: row.earlyWarningInfo,
      shipEarlyWarning: row.shipEarlyWarning,
      warnLevel: row.earlyWarningInfo.warnLevel,
      status: row.earlyWarningInfo.status,
      navigationClosure: row.earlyWarningInfo.navigationClosure
    };
  } else {
    // 兼容旧的扁平化结构
    currentWarning.value = {
      ...row,
      shipEarlyWarning: null,
      earlyWarningInfo: null
    };
  }

  // 初始化表单
  judgmentForm.value = {
    judgmentResult: 0,
    eventLevel: currentWarning.value.warningLv || currentWarning.value.warnLevel || '',
    title: `船舶预警事件-${currentWarning.value.shipName || currentWarning.value.shipEarlyWarning?.shipName}`,
    happenTime: currentWarning.value.createTime || currentWarning.value.warningTime || currentWarning.value.shipEarlyWarning?.createTime || currentWarning.value.shipEarlyWarning?.warningTime || '',
    location: (currentWarning.value.lon || currentWarning.value.shipEarlyWarning?.lon) && (currentWarning.value.lat || currentWarning.value.shipEarlyWarning?.lat) 
      ? `经度${currentWarning.value.lon || currentWarning.value.shipEarlyWarning?.lon}，纬度${currentWarning.value.lat || currentWarning.value.shipEarlyWarning?.lat}` 
      : '',
    firstReportTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    status: 1,
    description: `船舶${currentWarning.value.shipName || currentWarning.value.shipEarlyWarning?.shipName}(MMSI:${currentWarning.value.mmsi || currentWarning.value.shipEarlyWarning?.mmsi})，事件内容：${currentWarning.value.eventContent || currentWarning.value.shipEarlyWarning?.eventContent}`,
    warningId: currentWarning.value.id?.toString() || currentWarning.value.warningId?.toString() || currentWarning.value.shipEarlyWarning?.id?.toString() || currentWarning.value.shipEarlyWarning?.warningId?.toString(),
    eventType: 'ship'
  };

  judgmentDialog.visible = true;
}

// 提交研判表单
async function submitJudgmentForm() {
  if (!judgmentFormRef.value) return;

  try {
    await judgmentFormRef.value.validate();

    // 如果选择转为应急事件，则调用添加事件API
    if (judgmentForm.value.judgmentResult === 1) {
      // 准备事件数据
      const eventData = {
        happenTime: judgmentForm.value.happenTime,
        location: judgmentForm.value.location,
        description: judgmentForm.value.description,
        firstReportTime: judgmentForm.value.firstReportTime,
        status: judgmentForm.value.status,
        title: judgmentForm.value.title,
        warningId: judgmentForm.value.warningId // 关联的预警ID
      };

      // 调用添加事件API
      const res = await addEmergencyEvent(eventData);

      if (res.code === 200) {
        ElMessage.success('已成功将预警转为应急事件');

        // 更新预警状态为已处理
        if (currentDetail.value.earlyWarningInfo && currentDetail.value.shipEarlyWarning) {
          const updateData = {
            earlyWarningInfo: {
              ...currentDetail.value.earlyWarningInfo,
              status: 1 // 设置为已处理
            },
            shipEarlyWarning: {
              ...currentDetail.value.shipEarlyWarning
            }
          };
          await updateShipWarning(updateData);
        }

        // 刷新列表
        getList();
      } else {
        ElMessage.error(res.msg || '转为事件失败');
      }
    } else {
      // 更新预警研判结果但不转为事件
      ElMessage.success('研判完成');
    }

    judgmentDialog.visible = false;
  } catch (error) {
    console.error('研判提交失败:', error);
    ElMessage.error('研判提交失败');
  }
}

// 预警级别类型获取
const getWarnLevelType = (level) => {
  const levelMap = {
    '1': 'danger', // 一级预警 - 红色
    '2': 'warning', // 二级预警 - 橙色
    '3': 'success', // 三级预警 - 黄色
    '4': 'info' // 四级预警 - 蓝色
  };
  return levelMap[level] || 'info';
};

// 修改分页处理方法
const handlePageChange = (val: number) => {
  currentPage.value = val;
  DictQueryParams.value.pageNum = val; // 同步到查询参数
  getList();
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  DictQueryParams.value.pageSize = val; // 同步到查询参数
  getList();
};

// 添加搜索和筛选的监听
watch([filterType, searchValue], () => {
  currentPage.value = 1; // 重置为第一页
  DictQueryParams.value.pageNum = 1;
  getList();
});

// 删除处理
const handleDelete = (row: any) => {
  // 获取ID，兼容不同的数据结构
  const warningId = row.shipEarlyWarning?.id || row.earlyWarningInfo?.id || row.id;
  
  ElMessageBox.confirm('确定要删除该条预警吗？', '警告', {
    type: 'warning'
  })
    .then(async () => {
      await deleteGShipWarning(warningId);
      ElMessage.success('删除成功');
      await getList();
    })
    .catch(() => {});
};

// 添加新增处理方法
const router = useRouter();

const AddComponent = defineAsyncComponent(() => import('@/views/Bridge/traffic-accident/ship.vue'));
const addDialogVisible = ref(false);

const handleAdd = () => {
  addDialogVisible.value = true;
};

// 添加成功处理函数
const handleAddSuccess = () => {
  addDialogVisible.value = false;
  getList();
  ElMessage.success('新增成功');
};

// 添加船舶预警属性获取函数
const getShipProperty = (row: any, property: string) => {
  // 优先从shipEarlyWarning对象中获取属性
  if (row.shipEarlyWarning && row.shipEarlyWarning[property] !== undefined) {
    return row.shipEarlyWarning[property];
  }
  // 其次，尝试从earlyWarningInfo中获取属性（例如status和warnLevel等）
  if (property === 'warnLevel' && row.earlyWarningInfo && row.earlyWarningInfo.warnLevel !== undefined) {
    return row.earlyWarningInfo.warnLevel;
  }
  if (property === 'status' && row.earlyWarningInfo && row.earlyWarningInfo.status !== undefined) {
    return row.earlyWarningInfo.status;
  }
  if (property === 'navigationClosure' && row.earlyWarningInfo && row.earlyWarningInfo.navigationClosure !== undefined) {
    return row.earlyWarningInfo.navigationClosure;
  }
  // 再次尝试使用兼容模式，直接从row对象获取属性
  if (row[property] !== undefined) {
    return row[property];
  }
  // 最后尝试转换属性名称（如warningLv -> warnLevel）
  if (property === 'warnLevel' && row.warningLv !== undefined) {
    return row.warningLv;
  }
  // 默认返回空值
  return '';
};

// 获取预警级别对应的图片URL
const getWarnLevelImageUrl = (level: string) => {
  return new URL(`/src/assets/svg/alert${level || '1'}.svg`, import.meta.url).href;
};

// 添加字典查询方法调用
onMounted(() => {
  getShipTypeDict();
  getWarnLevelDict();
  getNotifyMethodDict();
  getList();
});

// 多选相关
const multipleSelection = ref<any[]>([]);

// 表格多选框选中事件处理
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection;
};

// 批量删除
const batchDelete = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要删除的数据');
    return;
  }
  
  // 获取选中行的ID列表
  const ids = multipleSelection.value.map(item => {
    return item.shipEarlyWarning?.id || item.earlyWarningInfo?.id || item.id;
  }).join(',');
  
  ElMessageBox.confirm('确定要删除选中的数据吗？', '警告', {
    type: 'warning'
  })
    .then(async () => {
      await deleteGShipWarningBatch(ids);
      ElMessage.success('批量删除成功');
      // 清空选中项
      multipleSelection.value = [];
      // 刷新列表数据
      await getList();
    })
    .catch(() => {});
};

const getStatusType = (status: number): 'warning' | 'primary' | 'success' | 'info' => {
  const statusMap: Record<number, 'warning' | 'primary' | 'success' | 'info'> = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'info'
  };
  return statusMap[status] || 'warning';
};

const getStatusLabel = (status: number): string => {
  const statusMap: Record<number, string> = {
    0: '未处理',
    1: '进行中',
    2: '已控制',
    3: '已关闭'
  };
  return statusMap[status] || '未处理';
};
</script>

<style scoped lang="scss">
.list-page {
  padding: 20px;
  background: var(--el-bg-color-page);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.filter-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--el-bg-color-overlay);
  padding: 16px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  margin-top: 16px;
  background: var(--el-bg-color-overlay);

  :deep(th) {
    background: var(--el-bg-color-page) !important;
  }

  :deep(.warning-row) {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }

  :deep(.success-row) {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }

  :deep(.el-table__cell) {
    &.el-table__cell:nth-child(5) {
      min-width: 180px; /* 预计发生时间列 */
    }

    &.el-table__cell:nth-child(6) {
      min-width: 120px; /* 预计持续时间列 */
    }
  }
}

.detail-container {
  display: flex;
  gap: 30px;
  padding: 20px 0;

  .detail-column {
    flex: 1;
    min-width: 300px;

    .detail-title {
      color: #409eff;
      font-size: 16px;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px solid #ebeef5;
    }

    .detail-row {
      margin-bottom: 12px;
      display: flex;
      line-height: 1.6;

      .detail-label {
        width: 90px;
        color: #909399;
        flex-shrink: 0;
      }

      .detail-value {
        flex: 1;
        color: #606266;
        word-break: break-word;
      }
    }
  }

  .unit {
    margin-left: 8px;
    color: #909399;
    font-size: 12px;
  }

  .el-input-number {
    width: 100%;

    :deep(.el-input__inner) {
      text-align: left;
    }
  }

  .el-date-editor {
    width: 100%;
  }

  .el-radio-group {
    margin-top: 8px;
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--el-bg-color-page);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--el-border-color-light);
}

.dialog-title {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.edit-btn,
.cancel-btn,
.save-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 10px 20px;
  border-radius: 6px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.cancel-btn {
  &:hover {
    background-color: #f4f4f5;
    color: #909399;
  }
}

.save-btn {
  &:hover {
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

.disabled-field {
  :deep(.el-input__inner) {
    background-color: #f8f9fa;
    border-color: #e4e7ed;
    color: #909399;
    cursor: not-allowed;
  }
}

.el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

  &__body {
    padding: 24px;
    background: var(--el-bg-color-overlay);
  }
}

.el-form-item {
  margin-bottom: 24px;

  :deep(.el-form-item__label) {
    color: #606266;
    font-weight: 500;
  }
}

.unit {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
  font-style: italic;
}

.add-dialog {
  &__body {
    padding: 0;
  }
}

.judgment-dialog {
  &__body {
    padding: 24px;
  }
}

.judgment-section {
  margin-bottom: 30px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.section-title {
  font-size: 18px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-section {
  background-color: rgba(64, 158, 255, 0.05);
  border-left: 4px solid #409eff;
}

.refresh-button {
  transition: all 0.3s ease;

  &:hover {
    transform: rotate(180deg);
  }
}
</style>
